<template>
  <div class="app-container">
    <el-row>
      <el-col>
        <el-select v-model="queryParams.year" placeholder="选择年份" @change="handleYearChange">
          <el-option v-for="item in dict.type.biz_work_year_list" :key="item.value" :label="item.label" :value="item.value"> </el-option>
        </el-select>
        <el-select v-model="queryParams.quarter" placeholder="选择季度" class="ml-10" @change="handleQuarterChange">
          <el-option v-for="item in quarterOptions" :key="item.value" :label="item.label" :value="item.value"> </el-option>
        </el-select>
        <el-select v-model="queryParams.deptId" placeholder="选择待查询部门" class="ml-10" @change="handleRefresh">
          <el-option v-for="item in deptOptions" :key="item.value" :label="item.label" :value="item.value"> </el-option>
        </el-select>
      </el-col>
    </el-row>
    <div class="text-banner">
      <span>重点工作情况汇总（共 {{ keyWorkTotal }} 条）</span>
      <el-button size="mini" type="primary" circle icon="el-icon-refresh" plain @click="handleRefresh" />
    </div>
    <div v-loading="keyWorkLoading">
      <el-button
        icon="el-icon-s-claim"
        size="mini"
        type="primary"
        plain
        @click="handleSubmit"
        class="float-right mb-10"
        v-hasPermi="['work-assessment:key-supervision:submit']"
        >提交打分</el-button
      >
      <el-table :data="keyWorkList" border style="width: 100%" @selection-change="handleSelectionChange($event, index)">
        <el-table-column label="序号" type="index" align="center">
          <template slot-scope="scope">
            <span>{{ scope.$index + 1 }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="normName" label="指标名称" width="180" align="center" show-overflow-tooltip> </el-table-column>
        <!-- <el-table-column prop="workNatureDict" label="工作性质" width="180" align="center">
          <template slot-scope="scope">
            <dict-tag :options="dict.type.biz_work_nature" :value="scope.row.workNatureDict" />
          </template>
        </el-table-column> -->
        <el-table-column prop="month" label="月度" width="80" align="center">
          <template slot-scope="scope">
            <span>{{ scope.row.month }}月</span>
          </template>
        </el-table-column>
        <el-table-column prop="workContent" label="内容及方式" min-width="180" align="center">
          <template slot-scope="scope">
            <div class="pre-wrap align-left">{{ scope.row.workContent || '-' }}</div>
          </template>
        </el-table-column>
        <el-table-column prop="planScore" label="分值" width="80" align="center"> </el-table-column>
        <el-table-column prop="workCompletionSituationDict" label="完成情况" min-width="120" align="center">
          <template slot-scope="scope">
            <dict-tag :options="dict.type.biz_dept_important_work_completion" :value="scope.row.workCompletionSituationDict" />
          </template>
        </el-table-column>
        <el-table-column prop="remarks" label="备注" min-width="220" align="center">
          <template slot-scope="scope">
            <span class="pre-wrap">{{ scope.row.remarks || '-' }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="selfScore" label="自评得分" width="80" align="center"></el-table-column>
        <el-table-column prop="workCompletionMaterialUrls" label="完成材料" min-width="180" align="center">
          <template slot-scope="scope">
            <div v-if="scope.row.workCompletionMaterialUrls">
              <el-tooltip
                v-for="(url, index) in scope.row.workCompletionMaterialUrls.split(',')"
                :key="index"
                effect="dark"
                :content="formatFileUrl(url)['name']"
                placement="top-start"
              >
                <el-button type="text" @click="handlePreviewFile(url)" class="file-preview-btn">
                  {{ formatFileUrl(url)['name'] }}
                </el-button>
              </el-tooltip>
            </div>
            <span v-else>-</span>
          </template>
        </el-table-column>
        <el-table-column prop="workCompletionDate" label="完成日期" width="160" align="center"></el-table-column>
        <el-table-column prop="supervisionScore" label="核查得分" width="130" align="center">
          <template slot-scope="scope">
            <el-input-number v-model="scope.row.supervisionScore" placeholder="核查分" controls-position="right" :min="0"></el-input-number>
          </template>
        </el-table-column>
        <el-table-column prop="supervisionSituation" label="核查情况" width="150" align="center">
          <template slot-scope="scope">
            <el-input
              v-model="scope.row.supervisionSituation"
              type="textarea"
              placeholder="输入核查情况"
              :rows="1"
              :autosize="{ minRows: 1, maxRows: 5 }"
            ></el-input>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <FilePreview :visible.sync="filePreviewVisible" :file="previewFile"></FilePreview>
  </div>
</template>

<script>
import { keyWorkAssessment } from '@/api/work-assessment'
import { listScoreDept as listDept } from '@/api/work-approval/dept-supervision'
import { list as listPlan } from '@/api/work/work-plan'
import { quarterFormat } from '@/utils/quarter.js'
import FilePreview from '@/components/FilePreview'
import { mixins } from '@/mixins'
import ApprovalLog from '@/components/ApprovalLog'

export default {
  name: 'key-supervision',
  mixins: [mixins],
  dicts: ['biz_work_year_list', 'biz_work_nature', 'biz_work_score_type', 'biz_dept_important_work_completion'],
  props: {},
  components: { FilePreview, ApprovalLog },
  data() {
    return {
      previewFile: {},
      filePreviewVisible: false,
      keyWorkTotal: 0,
      keyWorkList: [],
      keyWorkLoading: false,
      quarterOptions: [],
      deptOptions: [],
      queryParams: {
        year: '',
        quarter: '',
        workType: 'ZDGZ',
        deptId: '',
        workReportMark: true,
        reportAuditStatusDictList: 'SHTG'
      }
    }
  },
  computed: {},
  watch: {},
  created() {
    this.handleYearChange(new Date().getFullYear())
  },
  methods: {
    // 提交表单打分
    handleSubmit() {
      let params = this.keyWorkList.map(item => {
        return { id: item.id, supervisionScore: item.supervisionScore, supervisionSituation: item.supervisionSituation }
      })
      keyWorkAssessment(params).then(res => {
        this.$modal.msgSuccess('已提交')
        this.handleRefresh()
      })
    },
    // 预览文件
    handlePreviewFile(url) {
      let fileItem = this.formatFileUrl(url)
      this.previewFile = { url, ...fileItem }
      this.filePreviewVisible = true
    },
    // 刷新
    handleRefresh() {
      this.getDeptList()
    },
    // 获取部门
    getDeptList() {
      let params = JSON.parse(JSON.stringify(this.queryParams))
      delete params.deptId
      delete params.workReportMark
      delete params.reportAuditStatusDictList
      listDept(params).then(res => {
        let { data } = res
        if (Array.isArray(data) && data.length) {
          this.deptOptions = res.data.map(item => {
            return { label: item.deptName, value: item.deptId }
          })
          let findDept = this.deptOptions.find(item => item.value === this.queryParams.deptId)
          if (!findDept) {
            this.queryParams.deptId = this.deptOptions[0].value
          }
        } else {
          this.deptOptions = []
          this.queryParams.deptId = ''
        }
        this.getList()
      })
    },
    // 年度选择
    handleYearChange(year) {
      this.queryParams.year = year
      // 获取当前季度、季度列表（往年默认第一季度）
      let { quarter, quarterList } = quarterFormat(year)
      this.quarterOptions = quarterList
      this.handleQuarterChange(quarter)
    },
    // 季度选择
    handleQuarterChange(quarter) {
      this.queryParams.quarter = quarter
      this.handleRefresh()
    },
    getList() {
      this.keyWorkLoading = true
      listPlan(this.queryParams)
        .then(res => {
          this.keyWorkLoading = false
          let { rows, total } = res
          this.keyWorkTotal = total
          this.keyWorkList = rows
        })
        .catch(err => (this.keyWorkLoading = false))
    }
  }
}
</script>

<style lang="scss" scoped>
.file-preview-btn {
  width: 100%;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  margin-left: 0;
  padding: 0;
}

::v-deep .el-input-number--medium {
  width: auto;
}
</style>
